/*
 * @Author: xiaosihan 
 * @Date: 2024-10-06 12:51:10 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 18:01:05
 */

import utilsApi from "@api/utilsApi";
import utils from "@utils";
import factoryStore from "@views/factory/factoryStore";
import { Button, Cascader, Form, Input, InputNumber, Select } from "antd";
import axios from "axios";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./madeInfo.module.less";
const { Option } = Select;

interface Iprops {
    children?: ReactNode
}

// 制造信息
export default function MadeInfo(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [logo, setLogo] = useState("./logo2.png");
    const [chinaJSON, setChinaJSON] = useState<any>([]);
    const [form] = Form.useForm();

    useEffect(() => {
        (async () => {
            const res = await axios.get("./china.json");
            setChinaJSON(res.data);
        })();
    }, []);

    useEffect(() => autorun(() => {

    }, { delay: 10 }), []);

    //上一步
    const prev = () => {
        factoryStore.setLoginStatus("companyInfo");
    }

    // 下一步
    const next = () => {
        form.validateFields()
            .then(async () => {
                factoryStore.setLoginStatus("introduce");
            }).catch(err => {
            })
    }

    const residences = [
        {
            value: 'china',
            label: '中国',
            children: chinaJSON,
        }
    ];

    return (
        <div
            ref={dom}
            className={styles.madeInfo}
        >
            <div className={styles.title}>制造和服务</div>
            <div className={styles.subTitle}>您的公司档案还未验证，产品提交后不能直接展示给客户，可联系客服经理验证</div>

            <Form
                form={form}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                initialValues={{
                }}
                autoComplete="off"
            >
                <div className={styles.subT} >服务类型</div>

                <Form.Item
                    name="serviceType"
                    label="服务类型"
                    rules={[{ type: 'array', required: true, message: '请选择服务类型!' }]}
                >
                    <Select
                        className={styles.scelect}
                        mode="multiple"
                        placeholder="服务类型"
                    >
                        <Option value="1">非标定制</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    name="processingType"
                    label="加工类型"
                    rules={[{ type: 'array', required: true, message: '请选择加工类型!' }]}
                >
                    <Select
                        className={styles.scelect}
                        mode="multiple"
                        placeholder="加工类型"
                    >
                        <Option value="1">加工类型</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    name="material"
                    label="加工材料"
                    rules={[{ type: 'array', required: true, message: '请选择加工材料!' }]}
                >
                    <Select
                        className={styles.scelect}
                        mode="multiple"
                        placeholder="加工材料"
                    >
                        <Option value="1">金属</Option>
                        <Option value="2">塑料</Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    name="area"
                    label={
                        <>
                            适用领域
                        </>
                    }
                    rules={[{ type: 'array', required: true, message: '请选择适用领域!' }]}
                >
                    <Select
                        className={styles.scelect}
                        mode="multiple"
                        placeholder="适用领域"
                    >
                        <Option value="1">航空</Option>
                        <Option value="2">医疗</Option>
                    </Select>
                </Form.Item>

                <div className={styles.subT} >服务类型</div>

                <Form.Item
                    name="a"
                    label="支持数量"
                    rules={[{ type: 'array', required: true, message: '请选择支持数量!' }]}
                >
                    <InputNumber controls={false} className={styles.input} placeholder="支持数量" size="large" />
                </Form.Item>

                <Form.Item
                    name="b"
                    label="最大零件尺寸"
                    rules={[{ type: 'array', required: true, message: '请选择支持数量!' }]}
                >
                    <InputNumber controls={false} className={styles.input} placeholder="支持数量" size="large" />
                </Form.Item>

                <Form.Item
                    name="c"
                    label="支持最低公差"
                    rules={[{ type: 'array', required: true, message: '请输入支持最低公差!' }]}
                >
                    <InputNumber controls={false} className={styles.input} placeholder="支持最低公差" size="large" />
                </Form.Item>


            </Form>

            <div className={styles.btns} >
                <Button
                    onClick={() => {
                        prev();
                    }}
                >
                    &nbsp;上一步&nbsp;
                </Button>
                &nbsp;
                <Button
                    type="primary"
                    onClick={() => {
                        next();
                    }}
                >
                    &nbsp;下一步&nbsp;
                </Button>
            </div>

        </div>
    );

}